<template>
  <div class="ticket-box">
    <p class="mobileBamcTitle" v-if="BSKCardList.length">会员卡</p>
    <ul class="mobileBamcWrapper" v-for="(item, index) in BSKCardList" :key="index">
      <li class="mobileBamcList" @click="discountsAndChargeAndTicketsAndMovie(item)">
        <template>
          <img src="./bskbg.png" alt="" />
        </template>
        <div class="cardNoContainer">
          <div class="lockFlag">
            <img class="lockFlagImg" src="./bsklogo.png" alt="" />
          </div>
          <p class="bamcListNumCard">必胜客会员卡</p>
        </div>
        <svg class="go-icon" x="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 10">
          <path fill="#FFFFFF"
            d="M322.292893,56.7071068 C321.902369,56.3165825 321.902369,55.6834175 322.292893,55.2928932 C322.683418,54.9023689 323.316582,54.9023689 323.707107,55.2928932 L328.414214,60 L323.707107,64.7071068 C323.316582,65.0976311 322.683418,65.0976311 322.292893,64.7071068 C321.902369,64.3165825 321.902369,63.6834175 322.292893,63.2928932 L325.585786,60 L322.292893,56.7071068 Z"
            transform="translate(-322 -55)" />
        </svg>
      </li>
    </ul>

    <p class="mobileBamcTitle" v-if="ticketListData.length > 0">票券</p>
    <!--优惠券列表-->
    <ul class="ticket discount-coupon">
      <li :class="item.ticketType == 2 ? listStyle : listStyleNormal" :key="index"
        v-for="(item, index) in ticketListData" @click="discountsAndChargeAndTicketsAndMovie(item)">
        <svg class="leftIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="80" viewBox="0 0 20 80">
          <g fill="none">
            <path fill="#FC595D" fill-opacity=".01"
              d="M20,-4.00177669e-11 L20,80 L6,80 C2.6862915,80 -1.6825652e-11,77.3137085 -1.6825652e-11,74 L1.25055521e-11,50.4852814 C1.3983481e-11,48.8939824 0.632141042,47.367859 1.75735931,46.2426407 L4,44 C6.209139,41.790861 6.209139,38.209139 4,36 L1.75735931,33.7573593 C0.632141042,32.632141 1.3983481e-11,31.1060176 1.25055521e-11,29.5147186 L-1.6825652e-11,6 C-2.01225703e-11,2.6862915 2.6862915,-3.63797881e-11 6,-4.00177669e-11 L20,-4.00177669e-11 Z" />
            <path fill="#F0F0F0"
              d="M0,50.4855627 C1.47792889e-12,48.8942638 0.632141042,47.3681403 1.75735931,46.2429221 L4,44.0002814 C6.209139,41.7911424 6.209139,38.2094204 4,36.0002814 L1.75735931,33.7576407 C0.632141042,32.6324224 1.47792889e-12,31.1062989 0,29.515 L0,50.4855627 Z" />
          </g>
        </svg>
        <div class="discount-coupon-icon" v-if="item.ticketType == 1 || item.ticketType == 5">
          <img src="./icon-kaquan-gongyuantaopiao@3x@2x.png" alt="" />
        </div>
        <div class="discount-coupon-icon" v-if="item.ticketType == 2">
          <img src="./packeticon@3x.png" alt="" />
        </div>
        <div class="discount-coupon-icon" v-if="item.ticketType == 3">
          <img src="./icon-kaquan-kuaichongquan@3x@2x.png" alt="" />
        </div>
        <div class="discount-coupon-icon" v-if="item.ticketType == 4">
          <img src="./icon-kaquan-piaowu@3x@2x.png" alt="" />
        </div>

        <div class="discount-coupon-detail">
          <p class="coupon-detail-title" v-if="item.ticketType == 1">
            {{ item.ticketData.ticketDes }}
          </p>
          <p class="coupon-detail-title" v-if="item.ticketType == 2">
            {{ item.ticketData.ticketAmount | (amount - format) }}元{{
      item.ticketData.ticketName
    }}
          </p>
          <p class="coupon-detail-title" v-if="item.ticketType == 3">
            {{ item.ticketData.amt | (amount - format) }}元快充券
          </p>
          <p class="coupon-detail-title" v-if="item.ticketType == 4">
            {{ item.ticketData.goodsName }}
          </p>
          <p class="coupon-detail-title" v-if="item.ticketType == 5">
            {{ item.ticketTypeStr }}{{ item.ticketData.ticketName }}
          </p>
          <div class="coupon-detail-label" v-if="item.ticketType == 5">
            <div>
              <span>使用日期: </span><span>{{ item.ticketDateStr }}</span>
            </div>
            <div style="margin-left: 30px">
              <span>数量: </span><span>{{ item.ticketData.ticketNum }}张</span>
            </div>
          </div>
          <!--门票-->
          <div class="coupon-detail-label" v-if="item.ticketType == 1">
            <span>有效期至</span>
            <span>{{
      item.ticketData.expiryDate | (expiryDate - format)
    }}</span>
          </div>
          <!--优惠券-->
          <div class="coupon-detail-label" v-if="item.ticketType == 2">
            <span class="espec-dot" v-if="item.channelArr.length >= 3">...</span>
            <span>使用渠道:</span>
            <span class="border-span" :key="index" v-for="(item, index) of item.channelArr">
              <span class="label-text">{{ item }}</span>
            </span>
            <!-- <span class="border-span">
              <span class="label-text">手机一卡通卡片绑定</span>
            </span>
            <span class="border-span">
              <span class="label-text">手机一卡通卡片绑定</span>
            </span> -->
          </div>
          <!--快充券-->
          <div class="coupon-detail-label" v-if="item.ticketType == 3">
            <span>卡号:</span>
            <span>{{ item.ticketData.cardNo | (cardNo - format) }}</span>
          </div>
          <!--电影票-->
          <div class="coupon-detail-label" v-if="item.ticketType == 4">
            <span>场次:</span>
            <span>{{ item.ticketData.times }}</span>
          </div>
        </div>
        <svg class="rightIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="80" viewBox="0 0 20 80">
          <g fill="none" transform="matrix(-1 0 0 1 20 0)">
            <path fill="#FC595D" fill-opacity=".01"
              d="M20,-4.00177669e-11 L20,80 L6,80 C2.6862915,80 -1.6825652e-11,77.3137085 -1.6825652e-11,74 L1.25055521e-11,50.4852814 C1.3983481e-11,48.8939824 0.632141042,47.367859 1.75735931,46.2426407 L4,44 C6.209139,41.790861 6.209139,38.209139 4,36 L1.75735931,33.7573593 C0.632141042,32.632141 1.3983481e-11,31.1060176 1.25055521e-11,29.5147186 L-1.6825652e-11,6 C-2.01225703e-11,2.6862915 2.6862915,-3.63797881e-11 6,-4.00177669e-11 L20,-4.00177669e-11 Z" />
            <path fill="#F0F0F0"
              d="M0,50.4855627 C1.47792889e-12,48.8942638 0.632141042,47.3681403 1.75735931,46.2429221 L4,44.0002814 C6.209139,41.7911424 6.209139,38.2094204 4,36.0002814 L1.75735931,33.7576407 C0.632141042,32.6324224 1.47792889e-12,31.1062989 0,29.515 L0,50.4855627 Z" />
          </g>
        </svg>
      </li>
    </ul>
    <p v-if="IOSCardList.length > 0 || couponList.length > 0" class="mobileBamcTitle">
      优惠券/充值码
    </p>
    <ul v-if="IOSCardList.length > 0">
      <li class="pay-list" v-for="(item, index) in IOSCardList" :key="index">
        <div class="pay-list-iner">
          <div class="pay-list-iner-left">
            <span class="pay-num">{{ (item.txnAmt / 100).toFixed(0) }}</span>
          </div>
          <div class="pay-list-iner-right">
            <div class="pay-list-iner-right-po">
              <div class="pay-list-iner-right-tit">{{ (item.txnAmt / 100).toFixed(0) }}元充值码红包</div>
              <div class="pay-list-iner-right-time">
                {{ item.expireDate | getDates }} 到期
              </div>
              <!-- <div class="pay-list-iner-right-time">有效期：2021年6月21日</div> -->
              <div class="go-use" @click.stop="goToUse(cardNo)">去使用</div>
            </div>
          </div>
        </div>
        <div class="pay-list-bottom">
          <div class="pay-list-code">
            充值码券码： <span> {{ item.codePassword }} </span>
          </div>
          <div class="pay-list-copy" @click.stop="copyCode(item.codePassword)">
            复制券码
          </div>
        </div>
      </li>
    </ul>
    <!-- 普通活动券列表 -->
    <div class="shubiKq-item" v-show="couponList.length > 0">
      <div class="shubiKq" v-for="(item, index) in couponList" :key="index">
        <div class="shubiKq-top">
          <div class="shubiKq-top-left">
            <!-- <img src="./hb.png" alt="" srcset="" /> -->
            <div class="txt" v-if="item.couponType != '07'"><span class="icon">¥</span>{{ item.discountsAmt / 100 }}
            </div>
            <div class="txt" v-if="item.couponType == '07'"><img src="./icon-zhouka@2x.png" alt="" class="zhouka-icon">
            </div>
          </div>
          <div class="shubiKq-top-right">
            <div class="shubiKq-instructions">
              <div class="shubiKq-name">{{ item.activityName }}</div>
              <div class="shubiKq-date">
                {{ getDates(item.endTime) }} 到期
              </div>
            </div>
            <div class="shubiKq-top-button" v-if="item.couponType != '07'" @click="goUseTicket">
              去使用
            </div>
            <div class="monthly-number-box" v-if="item.couponType == '07'">
              <div class="monthly-number">{{ item.monthlyNumber }}</div>
              <div class="tips">剩余（次）</div>
            </div>
          </div>
        </div>
        <div class="shubiKq-buttom" v-if="item.couponType == '07'">
          <div>{{ item.explain }}</div>
        </div>
      </div>
    </div>
    <!-- 查看失效券 -->
    <div class="lookLose"
      v-if="(IOSCardList.length > 0 || couponList.length > 0) && !(show == true && shubiShow == true)">
      <div>没有更多有效券 &nbsp;</div>
      <div @click.stop="goToFailure" style="color: #008DEE;">查看失效券</div>
      <div @click.stop="goToFailure" style="margin-top:2px;color: #008DEE;">
        <van-icon name="arrow" />
      </div>
    </div>
    <div style="width: 100%; height: 50px"></div>
    <div class="black_overlay" v-show="loadingShow"></div>
    <div class="white_content" v-show="loadingShow">
      <div class="loadImg">
        <img src="./loadingh.gif" alt />
      </div>
    </div>
    <transition name="fade">
      <div id="toast" class="toast" v-show="toastTipShow">
        <div>{{ toastTipText }}</div>
      </div>
    </transition>
    <div>
      <div class="noData-container" v-if="show == true && shubiShow == true">
        <div class="noData-icon">
          <img src="../noData/noTicket.png" alt="" />
        </div>
        <div class="lookLose">
          <div>没有更多有效券 &nbsp;</div>
          <div @click.stop="goToFailure" style="color: #008DEE;">查看失效券</div>
          <div @click.stop="goToFailure" style="margin-top:2px;color: #008DEE;">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
let u = navigator.userAgent
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
import noData from '../noData/noData.vue'
import { httpRequest } from '@/util/http.js'
export default {
  props: {
    dataList: Array
  },
  data() {
    return {
      shubiShow: false, // 控制数币暂无可用优惠券
      show: false, // 控制其他优惠券暂无可用优惠券
      payCode: "",
      loadingShow: false,
      ticketListData: [],
      listStyle: "ticketList",
      listStyleNormal: "ticketListNormal",
      itemArr: {
        type: 2
      },
      customerId: "",
      sessionId: "",
      logonId: "",
      mobileNo: "",
      decryptStr: "", //解密后的数据
      encryptStr: "", //加密后的数据
      timer: null, //定时器
      BSKCardList: [], //必胜客会员卡券列表
      IOSCardList: [],
      failureCardList: [],
      toastTipShow: false, //吐司展示控制
      toastTipText: "", //吐司提示内容
      reqPathUrl: "", //从客户端获取到的请求地址
      Authorization: "", //从客户端获取到的header信息
      couponList: [] //数币活动卡券
    };
  },
  components: {
    noData
  },
  mounted() {
    this.loadingShow = true;
    // console.log('object');
    // console.log('this.dataList-------------------------')
    // console.log(this.dataList)
    setTimeout(() => {
      this.getTicketListData(); // 苹果营销卡券
      this.getListData(); // 活动卡券
      this.getLoseListData(); // 获取失效的卡券

      try {
        this.$tarckFun('CouponSectionPageView', {
          page_name: '卡券栏目页面浏览',
          page_id: "A0553",
          source_inlet:'更多'
        })
      } catch (error) {
        console.error(error, '神策埋点错误---CouponSectionPageView+卡券栏目页面浏览');
      }

    }, 200);
  },
  methods: {
    async getTicketListData() {
      let res = await this.getLocalUserInfo();
      let res2 = await this.getRequestUrl();
      let self = this;
      let wolfToken = self.tokenStr;
      // console.log('请求卡券列表00000000000000000ios')
      console.log(wolfToken);
      self.loadingShow = true;
      this.customerId;
      var jsonParam = {
        mobileId: self.userMobile,
        // customerId: "PB10126428",
        customerId: self.customerId,
        logonId: self.userLoginId,
        type: "0", //4 快充券
        state: "0",
        merId: "003070000001",
        channelId: "75111023"
      };
      // console.log('卡券列表请求参数')
      // console.log(wolfToken)
      httpRequest("wolf-customer/cardBag/query", wolfToken, jsonParam)
        .then(res => {
          // console.warn(res, '------------------??????')
          self.loadingShow = false;
          if (res.data.retCode == "0000") {
            // self.ticketListData = JSON.parse(res.data.ticketList);
            let ticketListDatass = JSON.parse(res.data.ticketList);
            // console.log('卡券列表数据321', ticketListDatass)
            if (ticketListDatass.length > 0) {
              //隐藏无数据展示
              this.show = false;
              // document.getElementById("noDataBox").style.display = "none";
              let IOSCardListchil = [];
              let arrList = [];
              ticketListDatass.forEach((item, index) => {
                if (item.ticketType == 2) {
                  // item.ticketData.ticketBusinessType = "01,02,05";
                  item.channelArr = self.stringToChannelArr(
                    item.ticketData.ticketBusinessType
                  );
                }
                if (item.ticketType == 5) {
                  if (item.ticketData.ticketType == 1) {
                    item.ticketTypeStr = "成人票 · ";
                  } else if (item.ticketData.ticketType == 0) {
                    item.ticketTypeStr = "成人票+旅游线 · ";
                  }
                  item.ticketDateStr = item.ticketData.ticketDate.replace(
                    /-/g,
                    "."
                  );
                }
                if (item.ticketType == 6) {
                  item.url = item.BSKUrl + "&thirdId=" + item.thirdId;
                  item.title = "必胜客会员卡";
                  item.ticketData = {
                    url: item.url,
                    title: item.title
                  };
                  self.BSKCardList.push(item);
                  self.$store.commit("SET_BSKCardList", self.BSKCardList);
                  self.ticketListData.splice(index, 1);
                }
                // item.state = 3;

                if (item.ticketType == 7 && item.state == 0) {
                  // 可使用的优惠券苹果
                  // this.show = false
                  self.IOSCardList.push(item);
                }
                // if (item.ticketType == 7) {
                //   self.IOSCardList.push(item);
                // }
                if (item.ticketType == 7 && item.state != 0) {
                  // 不可适用
                  // this.show = true
                  IOSCardListchil.push(item);
                }
                if (item.ticketType != 7) {
                  arrList.push(item);
                }

                //
              });
              // 判断 苹果优惠券能使用的有没有
              if (self.IOSCardList.length > 0) {
                this.show = false;
              } else {
                this.show = true;
              }
              self.ticketListData = arrList;
              // 存入全局仓库  父组件调用
              this.$store.commit("SET_IOSCardList", self.IOSCardList);
              this.$store.dispatch("SET_LISTS", IOSCardListchil);
              // console.log(arrList, 'arrList')
              // console.log(IOSCardList, 'IOSCardList')
              if (
                self.ticketListData.length > 0 ||
                self.IOSCardList.length > 0
              ) {
                document.getElementById("noDataBox").style.display = "none";
              }
            } else {
              this.show = true;
            }
            self.$store.commit("SET_ticketListData", self.ticketListData);
          } else {
            this.$toast(res.data.retMsg);
          }
        })
        .catch(error => {
          self.loadingShow = false;
        });
    },
    async getListData() {
      let res = await this.getLocalUserInfo();
      let res2 = await this.getRequestUrl();
      let self = this;
      let wolfToken = self.tokenStr;
      self.loadingShow = true;
      var jsonParam = {
        // customerId: "PB10126428",
        customerId: self.customerId,
        isValid: "Y",
        // useScope: " ",
      };
      console.log(jsonParam, "jsonParam");
      httpRequest(
        "wolf-promotion/lingLongCard/couponList",
        wolfToken,
        jsonParam
      )
        .then(res => {
          console.log("卡券------>", res);
          self.loadingShow = false;
          if (res.data.retCode == "0000") {
            let couponList = [];
            // let couponListLose = [];
            console.log(res.data.list, "lll");
            if (res.data.list.length != 0) {
              // let arr = [];
              res.data.list.forEach(item => {
                // if (item.state == 0) {
                couponList.push(item);
                // }
              });
              console.log("通过2");
              this.couponList = couponList;
              // console.log(couponList, '卡券列表信息1')
              this.$store.commit("SET_couponList", this.couponList);
              if (couponList.length == 0) {
                this.shubiShow = true;
                // console.error('shubiShow', true)
              } else if (couponList.length > 0) {
                this.shubiShow = false;
                // console.error('shubiShow', true)
              }
              console.log(this.shubiShow, "装太");
            } else {
              this.shubiShow = true;
            }
          } else {
            this.$toast(res.data.retMsg);
          }
        })
        .catch(err => {
          console.log(err);
          self.loadingShow = false;
        });
    },
    async getLoseListData() {
      let res = await this.getLocalUserInfo();
      let res2 = await this.getRequestUrl();
      let self = this;
      let wolfToken = self.tokenStr;
      self.loadingShow = true;
      var jsonParam = {
        // customerId: "PB10126428",
        customerId: self.customerId,
        isValid: "N",
        // useScope: " ",
      };
      console.log(jsonParam, "jsonParam");
      httpRequest(
        "wolf-promotion/lingLongCard/couponList",
        wolfToken,
        jsonParam
      )
        .then(res => {
          console.log("失效卡券------>", res);
          self.loadingShow = false;
          if (res.data.retCode == "0000") {
            let couponListLose = [];
            console.log(res.data.list, "loseList");
            if (res.data.list.length != 0) {
              let arr = [];
              res.data.list.forEach(item => {
                // if (item.state == 1 || item.state == 2) {
                arr.push(item);
                couponListLose = arr;
                // console.log('不可使用的数币卡券', couponListLose)
                this.$store.commit("SET_COULose", couponListLose);
              });
            }
          } else {
            this.$toast(res.data.retMsg);
          }
        })
        .catch(err => {
          console.log(err);
          self.loadingShow = false;
        });
    },
    goToFailure() {
      let embedding = {
        eventID: "seeOverdueCoupon", //商品ID
        extra: {
          name: "查看过期卡券"
        }
      };
      BmacJSBridge.call("AddEventburyPoints", embedding, data => { });
      this.$router.push({
        path: "/failure",
        query: {
          id: new Date().getTime()
        }
      });
    },
    goToUse() {
      const that = this;
      // 73 为安卓
      // 69 苹果
      let embedding = {
        eventID: "couponGoczm", //商品ID
        extra: {
          name: "卡券去充值码"
        }
      };
      BmacJSBridge.call("AddEventburyPoints", embedding, data => { });
      // console.log('-=-')
      if (isiOS) {
        BmacJSBridge.call(
          "startApp",
          {
            appId: "00000069",
            passData: {
              msg: "首页跳转充值码"
            },
            type: "1"
            // url:"http://192.168.120.18:8080"
          },
          result => {
            // console.warn(result)
          }
        );
      } else {
        BmacJSBridge.call("nfcCardTouch", {
          pageId: "00000073",
          // url: "http://192.168.120.44:8081",
          isNFC: true,
          params: "",
          title: "充值码",
          rightMenu: "使用帮助",
          rightUrlORpageId:
            "https://h5prod.bmac.com.cn/h5prod/bmac_clientwap/bmac/page-czm-sysm/page-czm-sysm.html",
          h5UrlTitle: "使用说明"
        });
      }
    },
    copyCode(dataCode) {
      let embedding = {
        eventID: "couponCodeCopy", //商品ID
        extra: {
          name: "复制卡券码"
        }
      };
      BmacJSBridge.call("AddEventburyPoints", embedding, data => { });
      const that = this;

      this.$copyText(dataCode).then(
        e => {
          that.payCode = dataCode;
          this.showToastTip("充值码已成功复制");
        },
        e => {
          this.showToastTip("充值码复制失败");
          // console.log(e)
        }
      );
    },
    //吐司展示
    showToastTip(text) {
      this.toastTipText = text;
      this.toastTipShow = true;
      let tempTimer = setTimeout(() => {
        this.toastTipShow = false;
        clearTimeout(tempTimer);
      }, 2000);
    },
    discountsAndChargeAndTicketsAndMovie(item) {
      this.showToastTip("业务升级中，敬请期待~");
      // 与客户端交互  0-优惠券|1-快充券|2-公园套票|3-票务(新影联)|4-必胜客
      // 后台数据 1、旅游套票  2、优惠券  3、快充券  4、电影票  5、八达岭   6、必胜客
      if (item.ticketType == 1) {
        var ticketSkipType = 2;
        BmacJSBridge.call("toWebViewWithUrlAndTitleRevised", {
          ticketSkip: JSON.stringify(ticketSkipType),
          title: "票券", //套票
          ticketInfo: JSON.stringify(item)
        });
      } else if (item.ticketType == 2) {
        var ticketSkipType = 0;
        BmacJSBridge.call("toWebViewWithUrlAndTitleRevised", {
          ticketSkip: JSON.stringify(ticketSkipType),
          title: "票券", //优惠券
          ticketInfo: JSON.stringify(item)
        });
      } else if (item.ticketType == 3) {
        var ticketSkipType = 1;
        BmacJSBridge.call("toWebViewWithUrlAndTitleRevised", {
          ticketSkip: JSON.stringify(ticketSkipType),
          title: "票券", //快充券
          ticketInfo: JSON.stringify(item)
        });
      } else if (item.ticketType == 5) {
        BmacJSBridge.call("toPageWithTitleAndWriteData", {
          title: "八达岭订单详情", //快充券
          sendParam: JSON.stringify(item.ticketData),
          typeNo: "7"
        });
      } else if (item.ticketType == 6) {
        BmacJSBridge.call("pushWindow", {
          url: item.url, // 要打开页面的 URL
          param: {
            readTitle: true
            // defaultTitle: '必胜客',
          }
        });
      } else {
        BmacJSBridge.call("pushWindow", {
          url: item.url, // 要打开页面的 URL
          param: {
            readTitle: true
            // defaultTitle: '必胜客',
          }
        });
      }
    },
    //获取客户端存储请求地址
    getRequestUrl() {
      return new Promise((resolve, reject) => {
        BmacJSBridge.call("obtainClientBaseUrl", {}, urlList => {
          // console.log('urlList')
          // console.log(urlList)
          this.reqPathUrl = urlList.pay3BaseUrl;
          this.Authorization = urlList.Authorization;
          resolve();
        });
      });
    },
    //获取本地存储登录信息
    getLocalUserInfo() {
      return new Promise((resolve, reject) => {
        BmacJSBridge.call("getBasicInfo", {}, result => {
          // console.log('获取手机设备数据')
          // console.log(result)
          let data = result.deviceData || result;
          // console.log(data)
          this.clientIp = data.clientIp;
          this.terminalIp = data.terminalIp;
          this.terminalMac = data.terminalMac;
          this.imei = data.imei;
          if (isiOS) {
            this.deviceModel = data.iphoneDeviceType;
            this.appVersion = data.version;
          }

          BmacJSBridge.call(
            "getAPDataStorage",
            {
              //获取登录信息
              type: "common",
              business: "userInfoGrid",
              key: "userInfo"
            },
            result => {
              // console.log(result)
              // console.log(']]]]]]]]]]]]]]]]]')
              if (
                result.error == "11" &&
                result.errorMessage == "未找到该数据"
              ) {
                this.jumpToLogin();
              } else {
                // console.log('87777', JSON.parse(result.data).data)
                let userInfo = JSON.parse(result.data);
                userInfo = userInfo.data;
                this.customerId = userInfo.customerId;
                this.userLoginId = userInfo.logonIds;
                this.userMobile = userInfo.mobileNo;
                this.tokenStr =
                  userInfo.token_type + " " + userInfo.access_token;
                resolve();
              }
            }
          );
        });
      });
    },
    //未登录跳转登录
    jumpToLogin() {
      BmacJSBridge.call(
        "startApp",
        {
          appId: "00000060",
          closeCurrentApp: true,
          passData: {},
          popNum: "-1",
          type: "1"
        },
        result => {
          // noop
        }
      );
    },
    /**
     * [getFormtTime 返回指定格式时间字符串]
     * @return {[Object]} [{reqDate:'20180101',reqTime:'010101'}]
     */
    // getFormtTime() {
    //   let datetime = new Date();
    //   let currentTime = {};
    //   let year = datetime.getFullYear().toString();
    //   let month = datetime.getMonth() + 1;
    //   month = this.replenishZero(month);
    //   let date = datetime.getDate();
    //   date = this.replenishZero(date);
    //   currentTime.reqDate = year + month + date;
    //   let hour = datetime.getHours();
    //   hour = this.replenishZero(hour);
    //   let minute = datetime.getMinutes();
    //   minute = this.replenishZero(minute);
    //   let second = datetime.getSeconds();
    //   second = this.replenishZero(second);
    //   currentTime.reqTime = hour + minute + second;
    //   return currentTime;
    // },
    // replenishZero(num) {
    //   let beautyNum = Number(num) < 10 ? "0" + num : num;
    //   return beautyNum.toString();
    // },
    //使用渠道-业务类型转换
    stringToChannelArr(string) {
      var tempArr = string.split(",");
      var resultArr = [];
      tempArr.forEach((item, index) => {
        switch (item) {
          case "01":
            resultArr.push("用户登录");
            break;
          case "02":
            resultArr.push("用户注册");
            break;
          case "03":
            resultArr.push("手机一卡通IOS开卡");
            break;
          case "04":
            resultArr.push("手机一卡通卡片绑定");
            break;
          case "05":
            resultArr.push("MOC开卡");
            break;
          case "06":
            resultArr.push("MOT开卡");
            break;
          case "07":
            resultArr.push("MOC手机一卡通充值");
            break;
          case "08":
            resultArr.push("MOT一卡通充值");
            break;
          case "09":
            resultArr.push("普通卡贴卡充值");
            break;
          case "10":
            resultArr.push("电子卡乘车");
            break;
          case "11":
            resultArr.push("大学生卡片充值");
            break;
          case "12":
            resultArr.push("中小学生卡片充值");
            break;
          case "13":
            resultArr.push("市郊铁路卡办理");
            break;
          case "14":
            resultArr.push("主题购买");
            break;
          case "15":
            resultArr.push("网易严选");
            break;
          case "16":
            resultArr.push("Costa咖啡");
            break;
          case "17":
            resultArr.push("新影联演出票务");
            break;
          case "18":
            resultArr.push("巨像商城");
            break;
          case "19":
            resultArr.push("积分兑彩");
            break;
          case "20":
            resultArr.push("旅游套票购买");
            break;
          case "21":
            resultArr.push("会员卡绑定");
            break;
          case "22":
            resultArr.push("企业账户绑定");
            break;
          case "23":
            resultArr.push("电子发票开票");
            break;
          case "24":
            resultArr.push("大学生实名认证");
            break;
          case "25":
            resultArr.push("小学生实名认证");
            break;
          default:
        }
      });
      return resultArr;
    },
    getDates(str) {
      // 提取年、月、日
      const year = str.substring(0, 4);
      const month = str.substring(4, 6);
      const day = str.substring(6, 8);
      return year + "年" + month + "月" + day + "日";
    },
    goUseTicket() {
      BmacJSBridge.call(
        "startApp",
        {
          appId: "00000006",
          closeCurrentApp: false,
          type: '1',
        },
        function (result) {
          // noop
        }
      );
    },
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
// @import '../../../common/stylus/mixin.styl';

.ticket-box{
  background-color:#f5f5f5;
  margin:0;
  padding:0 8px;
  min-height 100vh;
}
.shubiKq-top-button{
  display: inline-flex;
  padding: 0px 12px;
  border-radius: 21px;
  background: #008DEE;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  color:#fff;
  height: 26px;
  float:right;
  margin-right:10px;
}
.monthly-number-box{
  margin-top:10px;
  margin-right:10px;
  height: 26px;
  line-height: 26px;
  float:right;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.monthly-number-box .monthly-number{
  font-size:26px;
  font-weight:600;
  color:#000;
  text-align:center;
}
.monthly-number-box .tips{
  font-size:11px;
}
.shubiKq-top-right {
  display: flex;
  flex:1;
  align-items: center;
  justify-content: space-between;
  // background:green;

  .shubiKq-instructions{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: left;
    max-width: 67%;
  }
  .shubiKq-name{
    color: #000;
    font-family: "PingFang SC";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 106.667% */
    margin-bottom:8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .shubiKq-date{
    color: #999;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 116.667% */
  }
}
.lookLose {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  margin-top: 18px;
  display: flex;
  justify-content: center;
  /* identical to box height */
  color: #999999;
}

.noData-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;

  .noData-icon {
    width: 2.16rem;
    height: 2.16rem;

    img {
      width: 100%;
      display: block;
    }
  }

  .title {
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999999;
    text-align: center;
    line-height: 14px;
    margin-top: 0.32rem;
  }
}

* {
  margin: 0;
  padding: 0;
}

html, body, #app {
  width: 100%;
  height: 100%;
}

.black_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 3;
  -moz-opacity: 0.15;
  opacity: 0.15;
}

.white_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 48px;
  height: 43px;
  border-radius: 4px;
  box-sizing: border-box;
}

.loadImg {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: top;
}

.loadImg img {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: top;
}

.shubiKq {
  background: #FFFFFF;
  border-radius: 4px;
  margin-bottom: 10px;

  .shubiKq-top {
    display: flex;
    // justify-content: center;
    align-items: center;
    // background:#ef0012;
    .shubiKq-top-left {
      margin: 26px 0 20px;
      // background: #ef0012;
      padding: 0;
      text-align:center;
      width:90px;
      .txt{
          color: #FF4747;
          font-family: "PingFang SC";
          font-size: 34px;
          font-style: normal;
          font-weight: 500;
          text-align: center;
          // line-height: 34px; /* 100% */
        .icon{
          color: #FF4747;
          font-family: "PingFang SC";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

      }
      .zhouka-icon{
        width:48px;
        height:48px;
      }
    }
  }

  .shubiKq-buttom {
    border-top: 0.2px #E6E6E6 solid;
    padding: 8px 0px;
    margin: 0px 16px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #999999;
  }
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fade-enter-active {
  transition: all 0.1s ease;
}

.fade-leave-active {
  transition: all 0.1s;
}

.fade-enter, .fade-leave-to {
  transform: translateY(100%);
}

.toast {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  font-size: 14px;
  line-height: 16px;
  max-width: 50%;
  padding: 16px 10px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 5px;
  color: #FFFFFF;
  background: rgba(17, 17, 17, 0.7);
}

.mobileBamcWrapper {
  width: 100%;

  .mobileBamcList {
    margin: 0 0 10px 0;
    position: relative;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    height: 2.4rem;
    width: 100%;

    img {
      display: block;
      width: 100%;
      height: 2.4rem;
      border-radius: 6px;
    }

    .cardNoContainer {
      position: absolute;
      left: 0.4rem;
      top: 0.4rem;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .bamcListNumCard {
        height: 0.64rem;
        line-height: 0.64rem;
        font-size: 17px;
        white-space: nowrap;
        margin-left: 0.32rem;
        font-size: 17px;
        color: #FFFFFF;
      }

      .lockFlag {
        width: 0.64rem;
        height: 0.64rem;

        .lockFlagImg {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .go-icon {
      position: absolute;
      top: 50%;
      margin-top: -5px;
      right: 16px;
      width: 7px;
      height: 10px;
    }

    .deviceIcon {
      position: absolute;
      right: 16px;
      bottom: 0.3rem;
    }
  }
}

.no-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobileBamcTitle {
  margin: 0px 0px 16px 8px;
  padding 16px 0 0 0;
  // font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  /* identical to box height */
  color: #000000;
}

.posr {
  position: relative;

  .posr-chil {
    position: absolute;
    right: 0px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 24px;
    color: #008DEE;
  }
}

.pay-list {
  height: 118px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;

  .pay-list-iner {
    height: 88px;
    background: #FFFFFF;
    position: relative;

    .pay-list-iner-left {
      position: absolute;
      left: 0px;
      height: 100%;
      width: 107px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 34px;
      color: #FF4747;
      text-align: center;
      line-height: 88px;

      .pay-num::before {
        content: '￥';
        font-size: 20px;
      }
    }

    .pay-list-iner-right {
      position: absolute;
      left: 107px;
      height: 100%;
      width: calc(100% - 107px);

      .pay-list-iner-right-po {
        position: relative;
        padding-top: 27px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: normal;

        .pay-list-iner-right-tit {
          font-size: 14px;
          line-height: 20px;
          color: #1A191A;
        }

        .pay-list-iner-right-time {
          margin-top: 4px;
          font-size: 12px;
          line-height: 17px;
          color: #999999;
        }

        .go-use {
          background: #008DEE;
          // background: #FF6C00;
          font-weight: 500;
          font-size: 12px;
          line-height: 26px;
          padding-left: 16px;
          padding-right: 16px;
          text-align: center;
          color: #FFFFFF;
          position: absolute;
          border-radius: 12px;
          top: 31px;
          right: 16px;
        }
      }
    }
  }

  .pay-list-bottom {
    background: #FFFFFF;
    height: 30px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 30px;
    position: relative;
    font-size: 11px;

    .pay-list-code {
      border-top: 0.2px #E6E6E6 solid;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: normal;
      color: #999999;
    }

    .pay-list-copy {
      position: absolute;
      top: 0px;
      right: 16px;
      color: #008DEE;
    }
  }
}

.ticket {
  width: 100%;

  .ticketListNormal {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    margin-bottom: 10px;
    box-sizing: border-box;
    // box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.08)
    overflow: hidden;
    border-radius: 6px;
    position: relative;

    .discount-coupon-icon {
      margin: 0.48rem 0.32rem 0.48rem 0.4rem;
      display: block;
      float: left;
      width: 0.64rem;
      min-width: 0.64rem;
      height: 0.64rem;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .leftIcon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .rightIcon {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .discount-coupon-detail {
      float: left;
      overflow: hidden;

      .coupon-detail-title {
        font-size: 17px;
        height: 18px;
        line-height: 18px;
        color: #1A191A;
        font-weight: 600;
        width: 4.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .coupon-detail-label {
        width: 4.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 8px 0 0 0;
        overflow: hidden;
        font-size: 12px;
        color: #999999;
        font-weight: 700 !important;
        display: flex;
        flex-direction: row;

        .border-span {
          border: 1px solid;
          display: inline-block;
          height: 14px;
          line-height: 14px;

          .label-text {
            display: block;
            text-size-adjust: none;
            transform: scale(0.8);
          }
        }
      }
    }
  }

  .ticketList {
    display: flex;
    align-items: center;
    background-color: #FB595C;
    margin-bottom: 10px;
    box-sizing: border-box;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 6px;
    position: relative;

    .discount-coupon-icon {
      margin: 0.48rem 0.32rem 0.48rem 0.4rem;
      display: block;
      float: left;
      width: 0.64rem;
      height: 0.64rem;
      min-width: 0.64rem;
      height: 0.64rem;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .leftIcon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .rightIcon {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .discount-coupon-detail {
      float: left;
      overflow: hidden;

      .coupon-detail-title {
        font-size: 17px;
        height: 18px;
        line-height: 18px;
        color: #FFEFA8;
        font-weight: 600;
        width: 4.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .coupon-detail-label {
        width: 4.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 8px 0 0 0;
        overflow: hidden;
        font-size: 12px;
        color: #FFEFA8;
        font-weight: 700 !important;
        width: 94%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;

        .espec-dot {
          /* content "..." */
          color: #FFEFA8;
          text-align: right;
          position: absolute;
          background-image: linear-gradient(90deg, rgba(251, 89, 92, 0) 0%, #FB595D 75%);
          right: -0.01rem;
          top: 0;
          width: 0.7rem;
          height: 18px;
          display: block;
          z-index: 999;
        }

        .border-span {
          border: 1px solid;
          display: inline-block;
          height: 14px;
          line-height: 14px;
          border-radius: 2px;
          margin-right: 4px;

          .label-text {
            display: block;
            text-size-adjust: none;
            transform: scale(0.8);
          }
        }
      }
    }
  }
}
</style>
